<template>
	<view class="layout">
		<view class="nav">
			<view class="statuBar" :style="{height:statusBarHeight+'px'}">
				
			</view>
			<view class="titleBar" :style="{height:titleHeight+'px'}">
				<view class="title">
					<h2>{{title}}</h2>
				</view>
				<navigator url="/pages/search/search">
					<view class="search">
						<uni-icons type="search" size="20"></uni-icons>
						搜索
					</view>
				</navigator>
				
			</view>
		</view>
		<view class="fill" :style="{height:statusBarHeight+titleHeight+'px'}">
			
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
defineProps({
	title:{
		type:String,
		default:''
	}
})
let SYSTEM_INFO = uni.getSystemInfoSync()
let statusBarHeight = ref(SYSTEM_INFO.statusBarHeight)
let {top,height} = uni.getMenuButtonBoundingClientRect()
let titleHeight = ref(height+ (top - statusBarHeight.value)*2)
</script>

<style lang="scss">
.nav{
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background:
	linear-gradient(to bottom,transparent,#ffffff 400rpx),
	linear-gradient(to right,#097943,#00c9ff);
	.titleBar{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		.search{
			display: flex;
			align-items: center;
			background: rgba(255,255,255,0.7);
			width: 220rpx;
			padding: 5rpx 15rpx 5rpx 20rpx;
			border-radius: 40rpx;
			color: #999;
			font-size: 28rpx;
			margin-left: 30rpx;
		}
	}
}
</style>